<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="挂号单ID" prop="registerNumber">
        <el-input
          style="width: 380px"
          v-model="queryParams.registerNumber"
          placeholder="请输入挂号单ID"
          clearable
        />
        <!--        @keyup.enter.native="handleQuery"-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getPatient">搜索</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" onclick="alert('技术原因、无法读取IC卡')">
          读取IC卡
        </el-button>
      </el-form-item>
    </el-form>
    <div align="center" :style="styled">请输入正确的挂号单ID查询</div>
    <div :style="style">
      <div class="app-container container">
        <el-row>
          <el-col :span="12">
            <span>挂号单号:</span>
            <div v-text="queryParams.registerNumber" style="display: inline-block;margin-left: 50px"></div>
          </el-col>
          <el-col :span="12">
            <span>医生姓名:</span>
            <div v-text="patientList.patient.doctorName" style="display: inline-block;margin-left: 50px"></div>
          </el-col>
        </el-row>
        <el-row class="prow">
          <el-col :span="12">
            <span>科室名称:</span>
            <div v-text="patientList.patient.deptName" style="display: inline-block;margin-left: 50px"></div>
          </el-col>
          <el-col :span="12">
            <span>患者姓名:</span>
            <div v-text="patientList.patient.patientName" style="display: inline-block;margin-left: 50px"></div>
          </el-col>
        </el-row>
        <el-row class="prow">
          <el-col :span="12">
            <span>就诊时间:</span>
            <div v-text="patientList.patient.patientTime" style="display: inline-block;margin-left: 50px"></div>
          </el-col>
          <el-col :span="12">
            <span>主诉:</span>
            <div v-text="patientList.patient.ccm" style="display: inline-block;margin-left: 73px"></div>
          </el-col>
        </el-row>
        <el-row class="prow">
          <el-col :span="12">
            <span>诊断信息:</span>
            <div v-text="patientList.patient.msg" style="display: inline-block;margin-left: 50px"></div>
          </el-col>
          <el-col :span="12">
            <span>医生建议:</span>
            <div v-text="patientList.patient.advice" style="display: inline-block;margin-left: 50px"></div>
          </el-col>
        </el-row>
      </div>
      <div class="app-container container" style="margin-top: 10px">
        <el-row>
          <el-col :span="3">
            <el-button type="success" icon="el-icon-finished" @click="getAll">全选</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" icon="el-icon-finished" @click="clearAll">取消全选</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="danger" icon="el-icon-bank-card" @click="gtDrug">发药</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="app-container container" style="margin-top: 10px">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item :title="drugTitle" name="1">
            <el-table :data="drugList" @selection-change="handleSelectionChange" ref="multipleTable">
              <el-table-column type="selection" width="55" align="center"/>
              <el-table-column label="序号" align="center" prop="drugId" width="150"/>
              <el-table-column label="药品名称" align="center" prop="drugName" width="150" :show-overflow-tooltip="true"/>
              <el-table-column label="数量" align="center" prop="drugNumber" width="100" :show-voerflow-tootip="true"/>
              <el-table-column label="单价（元）" align="center" prop="drugRpPrice" width="150"
                               :show-voerflow-tootip="true"/>
              <el-table-column label="金额（元）" align="center" width="200"
                               :show-voerflow-tootip="true" prop="totalMoney"/>
              <!--              .drugRpPrice*drugList[i].drugNumber-->
              <!--              prop="drugRpPrice*drugNumber"-->
              <el-table-column label="服用备注" align="center" prop="remark" width="200" :show-voerflow-tootip="true"/>
              <el-table-column label="支付状态" align="center" prop="drugStatus" width="200" :show-voerflow-tootip="true">
                <template slot-scope="scope">
                  {{scope.row.drugStatus==='1'?'未支付':'已支付'}}
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      style="margin-top: 50px">
      <div class="app-container container">
        <el-row class="prow">
          <el-col :span="12">
            <span>订单号:</span>
            <div v-text="orderNumber" style="display: inline-block;margin-left: 50px"></div>
          </el-col>
          <el-col :span="12">
            <span>总金额:</span>
            <div v-text="totalMoney" style="display: inline-block;margin-left: 73px"></div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible=false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
    import {patientInfo, pres} from "@/api/charge/charge";
    import {gtDrug} from "@/api/charge/gtDrug";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "Dept",
        dicts: ['sys_normal_disable'],
        components: {Treeselect},
        data() {
            return {
                // 遮罩层
                loading: false,
                // 显示搜索条件
                showSearch: true,
                // 是否显示弹出层
                open: false,
                // 是否展开，默认全部展开
                isExpandAll: true,
                // 重新渲染表格状态
                refreshTable: true,
                style: {display: 'none'},
                styled: {display: 'block'},
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    registerNumber: undefined
                },
                //需要支付的钱数
                money: [
                    {money: 99},
                    {money: 88},
                    {money: 77}
                ],
                m1: 0,
                totalMoney: 0,
                checkTitle: '【检查处方】【1】【处方总额】:',
                patientList: {
                    patient: ''
                },
                drugList: [],
                checkList: [],
                drugTitle: '【药品处方】【2】【处方总额】:',
                //需要发药的药品数组
                drugs: [],
                //控制现金弹出框展示
                centerDialogVisible: false,
                //手风琴模式
                activeName: 1,
                // 表单参数
                form: {
                    orderPatientId: undefined,
                    orderMoney: 0,
                    type: '现金',
                    status: '0',
                    orderPatientId: ''
                },
                orderNumber: '',
                // 表单校验
                rules: {},
                multipleSelection: []
            };
        },
        methods: {
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.drugs = [];
                this.single = selection.length !== 1;
                this.multiple = !selection.length;
                this.m1 = 0;
                for (let i = 0; i < selection.length; i++) {
                    this.m1 += selection[i].totalMoney;
                    console.log(selection[i]);
                    this.drugs.push(selection[i].drugId);
                }
                this.totalMoney = this.m1;
            },
            getAll() {
                this.clearAll();
                this.$refs.multipleTable.toggleAllSelection();
            },
            clearAll() {
                this.totalMoney = 0;
                this.$refs.multipleTable.clearSelection();
            },
            preList() {
                pres(this.patientList.patient.patientId).then(response => {
                    this.drugList = response.rows[0];
                    this.checkList = response.rows[1];
                    this.drugTitle = '【药品处方】【2】【处方总额】:';
                    let drugMoney = 0;
                    for (let i = 0; i < this.drugList.length; i++) {
                        drugMoney += this.drugList[i].totalMoney
                    }
                    this.drugTitle += drugMoney;
                });
            },
            getPatient() {
                this.loading = true;
                this.patientList.patient = '';
                patientInfo(this.queryParams.registerNumber).then(response => {
                    if (response !== null) {
                        this.form.orderPatientId = response.patientId;
                        this.style = {display: 'block'};
                        this.styled = {display: 'none'};
                    }
                    if (response === '') {
                        this.style = {display: 'none'};
                        this.styled = {display: 'block'};
                    }
                    this.patientList.patient = response;
                    this.preList();
                });
                this.loading = false;
            },
            gtDrug() {
                console.log(this.drugs);
                console.log(this.totalMoney)
                if (this.totalMoney > 0) {
                    this.$confirm('确定发药？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'primary',
                        center: true
                    }).then(() => {
                        gtDrug(this.drugs).then(response => {
                            this.queryParams.registerNumber = '';
                            this.getPatient();
                        });
                        this.$message({
                            type: 'success',
                            message: '发药成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                } else {
                    alert("请先选择药品")
                }
            },
            handleQuery() {
            }
        }
    };
</script>
<style>
  .el-row {
    margin-bottom: 5px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .container {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
  }

  .prow {
    margin-top: 20px;
  }

  .pinfo {
    display: inline-block;
    margin-left: 50px;
  }

</style>
